<template>
    <div id="all">
        <i class="el-icon-menu" style="text-align: left">筛选</i>
        <!-- 头部 -->
        <div class="head">
            <label>输入搜索</label>
            <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 300px; margin: 0 20px"
            >
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">筛选</el-button>
            <el-button :plain="true" @click="open2">清空筛选条件</el-button>
        </div>
        <div class="list">
            <i class="el-icon-menu" style="text-align: left">已下架基金列表</i>
        </div>
        <!-- 表格 -->
        <el-table
            :data="AllfundData"
            border
            style="width: 100%; margin-top: 20px"
            max-height="400px"
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column fixed prop="fundCode" label="基金代码" width="100">
            </el-table-column>
            <el-table-column prop="fundName" label="基金名称" width="400">
            </el-table-column>
            <el-table-column prop="fundType" label="基金类型" width="100">
            </el-table-column>
            <el-table-column
                prop="fundNameAbbr"
                label="基金名称缩写"
                width="200"
            >
            </el-table-column>
            <el-table-column
                prop="fundCompanyName"
                label="基金公司名称"
                width="200"
            >
            </el-table-column>
            <el-table-column prop="netValue" label="当前净值" width="100">
            </el-table-column>
            <el-table-column prop="netValueDate" label="净值日期" width="100">
            </el-table-column>
            <el-table-column prop="riskLevel" label="风险等级" width="100">
            </el-table-column>
            <el-table-column prop="saleStatus" label="购买状态" width="100">
            </el-table-column>
            <el-table-column prop="redeemStatus" label="赎回状态" width="100">
            </el-table-column>
            <el-table-column prop="instId" label="机构代码" width="100">
            </el-table-column>
            <el-table-column prop="sellRate" label="赎回基础费率" width="200">
            </el-table-column>
            <el-table-column prop="trusteeRate" label="管理费率" width="200">
            </el-table-column>
            <el-table-column prop="manageRate" label="买入费率" width="200">
            </el-table-column>
            <el-table-column prop="dayOfGrowth" label="昨日涨跌幅" width="300">
            </el-table-column>
            <el-table-column prop="lastMonth" label="近一月涨跌幅" width="200">
            </el-table-column>
            <el-table-column
                prop="lastHalfYear"
                label="近半年涨跌幅"
                width="200"
            >
            </el-table-column>
            <el-table-column prop="status" label="软删除状态" width="300">
            </el-table-column>
            <el-table-column prop="score" label="热门指数" width="200">
            </el-table-column>
            <el-table-column prop="policy" label="投资策略" width="200">
            </el-table-column>
            <el-table-column prop="investStrategy" label="基金策略" width="800">
            </el-table-column>
            <el-table-column
                prop="investPhilosophy"
                label="基金理念"
                width="500"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)"
                        >恢复</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"
                        >彻底删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-button type="primary" icon="el-icon-delete" @click="open"
                >批量加入回收站</el-button
            >
        </div>
        <!-- 页码 -->
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 12, 15]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: "",
            AllfundData: [],
            pageSize: 5,
            currentPage: 1,
            pages: 0,
            total: 0,
        };
    },
    created() {
        this.getallDeletedata();
    },
    methods: {
        // 搜索
        async search(){
            const res=await this.api.fund.selectkeydel({
                select:this.input
            })
            if(res.code==200){
                this.AllfundData=res.data
            }
        },
        // 获取所有删除的基金
        async getallDeletedata() {
            const res = await this.api.fund.getAlldeletefund({
                limit: 1,
                page: 1,
            });
            if (res.code == 200) {
                this.AllfundData = res.data.list;
                this.total = res.data.total;
            }
        },
        open2() {
            this.input=''
            if(this.input==false){
                this.$message({
                showClose: true,
                message: "清空成功",
                type: "success",
            });
            }
            
        },
        // 恢复
        async handleEdit(index, row) {
            const res = await this.api.fund.recover({
                id: row.id,
            });
            if (res.code == 200) {
                this.getallDeletedata();
            }
        },
        //彻底删除
        async handleDelete(index, row) {
            const res = await this.api.fund.delete([row.id, row.id]);
            if (res.code == 200) {
                this.$message({
                    showClose: true,
                    message: "删除成功",
                    type: "success",
                });
                this.getallDeletedata();
            } else {
                this.$message({
                    showClose: true,
                    message: "删除失败",
                    type: "error",
                });
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleClick(row) {
            console.log(row);
        },
        goAdd() {
            this.$router.push({
                path: "/home/addfund",
            });
        },
        goDel() {
            this.$router.push({
                path: "/home/deletefund",
            });
        },
        open() {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>
<style scoped>
.list {
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.head {
    text-align: left;
    line-height: 50px;
}
.block {
    margin-top: 10px;
    height: 80px;
    text-align: center;
}
.el-main {
    line-height: 20px;
    text-align: left;
}
#all {
    line-height: normal;
    text-align: left;
}
#icon {
    text-align: left;
}
</style>>
    
</style>